<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>

<!--<link th:href="@{/ajax/libs/webuploader/webuploader.css}" rel="stylesheet"/>
<link th:href="@{/css/demo/webuploader-demo.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css}" rel="stylesheet"/>-->
<link th:href="@{/css/plugins/dropzone/basic.css}" rel="stylesheet"/>
<link th:href="@{/css/plugins/dropzone/dropzone.css}" rel="stylesheet"/>
<link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
<body class="white-bg">
<div class="ibox-content">
    <form action="" method="post" class="form-horizontal m" id="form-ordersHead-add" th:object="${ordersDetail}">
        <input id="id" name="id" th:field="*{id}"  type="hidden">
        <div class="form-horizontal m">

            <div class="form-group">
                <label class="col-sm-3 control-label">Order ID：</label>
                <div class="col-sm-9">
                    <input type="text" readonly class="form-control" th:field="*{orderID}" id="orderID" name="orderID">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">surfaceBill：</label>
                <div class="col-sm-9">
                    <button type="button" class="btn btn-primary" id="surfaceBillUploadBtn" data-loading-text="Loading..." onclick="$('#surfaceBillUpload').click();" shiro:hasPermission="module:ordersDetail:upload">upload surfaceBill</button>
                    <span th:if='*{surfaceBillUrl !=null }'>
                            <button type="button" class="btn btn-primary" id="printFaceBill" data-loading-text="Loading..." th:onclick="'javascript:print(\''+'#surfaceBillUploadIMG'+'\',\''+${ordersDetail.id}+'\')'" shiro:hasPermission="module:ordersDetail:print">print surfaceBill</button>
                        </span>
                    <div id="image_links">
                        <div id="surfaceBillUploadIMG_print">
                            <a th:href="*{surfaceBillUrl}" title="surfaceBill" data-gallery="">
                                <img th:src="*{surfaceBillUrl}" class="img-responsive" id="surfaceBillUploadIMG">
                            </a>
                        </div>

                    </div>
                    <input type="hidden" th:field="*{surfaceBillName}" name="surfaceBillName" id="surfaceBillUploadName" />
                    <input type="hidden" th:field="*{surfaceBillUrl}" name="surfaceBillUrl" id="surfaceBillUploadUrl" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">sendBill：</label>
                <div class="col-sm-9">
                    <button type="button" class="btn btn-primary" id="sendBillUploadBtn" data-loading-text="Loading..." onclick="$('#sendBillUpload').click();" shiro:hasPermission="module:ordersDetail:upload">upload sendBill</button>
                    <span th:if='*{sendBillUrl !=null }'>
                            <button type="button" class="btn btn-primary" id="printBill" data-loading-text="Loading..." th:onclick="'javascript:print(\''+'#sendBillUploadIMG'+'\',\''+${ordersDetail.id}+'\')'" shiro:hasPermission="module:ordersDetail:print">print sendBill</button>
                        </span>
                    <div id="image_links1">
                        <div id="sendBillUploadIMG_print" style="text-align: center;">
                            <div   style="text-align: center;">
                                <a th:href="*{sendBillUrl}" title="sendBill" data-gallery="">
                                    <img th:src="*{SendBillUrl}" style="width: 85%" id="sendBillUploadIMG">
                                </a>
                                <div th:if="*{sendBillUrl!=null}">
                                    <div th:if="${!#lists.isEmpty(locations[unitSKUs])}">The goods are available at the following address:<span th:text="${locations[unitSKUs]}"></span></div>
                                    <div th:if="${#lists.isEmpty(locations[unitSKUs])}">The goods are out of stock in the warehouse！</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" th:field="*{sendBillName}" name="sendBillName" id="sendBillUploadName" />
                    <input type="hidden" th:field="*{sendBillUrl}" name="sendBillUrl" id="sendBillUploadUrl" />
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-12 col-sm-offset-3">
                    <button type="submit" class="btn btn-primary" data-loading-text="Loading...">submit</button><!--  onclick="upload()" -->
                    <button onclick="$.modal.close()" class="btn btn-danger" type="button">close</button>
                </div>
            </div>
        </div>

    </form>

    <form action="" method="post" hidden="hidden" enctype="multipart/form-data">
        <input type="file" name="surfaceBill" id="surfaceBillUpload" accept="image/*" onchange="uploadIMG(this.id);" />
    </form>
    <form action="" method="post" hidden="hidden" enctype="multipart/form-data">
        <input type="file" name="sendBill" id="sendBillUpload" accept="image/*" onchange="uploadIMG(this.id);" />
    </form>

</div>

<div th:include="include::footer"></div>
<script type="text/javascript" th:inline="javascript">
    var prefix = ctx + "module/ordersDetail";
    initialize_image();
    initialize_image2();


    var websocket;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://www.iyusheng.cn/ws") ;
        // websocket = new WebSocket("ws://www.iyusheng.cn/ws");
    } else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://www.iyusheng.cn/ws");
        // websocket = new MozWebSocket("ws://www.iyusheng.cn/ws");
    } else {
        websocket = new SockJS("http://www.iyusheng.cn/sockjs");
        // websocket = new SockJS("http://www.iyusheng.cn/sockjs");
    }


    function uploadIMG(id) {
        var img = $('#'+id+'IMG');
        var button = $('#'+id+'Btn');
        var fileInput = document.getElementById(id);
        var file = fileInput.files[0];
        if(file===undefined || file.size<=0){
            return;
        }

        var formData = new FormData();
        formData.append('img_file',file);

        var $btn;

        $.ajax({
            url: ctx+'/module/ordersDetail/FileUploadServlet',
            dataType: 'json',
            type: 'POST',
            mimeType: "multipart/form-data",
            processData: false,
            contentType : false,
            data: formData,
            success: function (data) {
                img.attr('src',"/profile/"+data.detail);
                img.parent().attr('href','/profile/'+data.detail);
                $('#'+id+'Name').val(data.msg);
                $('#'+id+'Url').val(data.detail);
            },
            error: function (data) {
            },
            beforeSend: function (data) {
                $btn = $(button).button('loading');
            },
            complete: function (data) {
                $btn.button('reset');
            }
        });

    }


    //单张打印
    function print(billType,id) {
        var addLocation = billType=="#surfaceBillUploadIMG"?false:true;//是否添单据位置？发货单需要添加
        // console.log(addLocation);
        var locations = [];//货物的位置
        var ordersDetail = [[${ordersDetail}]];
        var skus = [];//单据的sku
        skus.push(ordersDetail.unitSKUs);
        // skus.push("HSQ0005AB");


        //打印发货单根据sku查询货物位置
        if(addLocation){
            $.ajax({
                url:ctx+'/module/ordersDetail/selectLocationAsMainSKU',
                dataType:'json',
                type:'post',
                async:false,
                data:{
                    skus:skus,
                },
                success:function (data) {
                    locations = data;
                }
            });
        }


        //货物不存在
        if (locations[skus]==undefined||locations[skus]==""){
            locations[skus]="The goods of this sku do not exist on the shelf";
        }


        //jquery打印方法
        $(""+billType+"_print").print({
            //是否读取页面的样式
            globalStyles: true,
            //添加与attrbute media=打印的链接。
            mediaPrint: false,
            //在隐藏的iframe中打印。
            iframe: true,
            //不打印 的内容（选择器）
            noPrintSelector: ".avoid-this",
            // manuallyCopyFormValues:true,
            // manualCopyFormValues:true,
            //在打印的html之前添加内容
            prepend:billType=="#surfaceBillUploadIMG"?"<div style='width: 100%;height: 80px'></div>":"<div style='width: 100%;height: 0px'></div>",
            // 在打印的html之后添加内容,这里添加的直接可以是jquery元素
            append:billType=="#surfaceBillUploadIMG"?null:"<br><h3>"+locations[skus]+"</h3>",//拼接货物位置
            //在window.print()调用后resolve一个jQuery.Deferred对象---点击浏览器的打印按钮以后的回调函数
            deferred: $.Deferred().done(function () {
                //判断打印的单据
                if(billType=='#surfaceBillUploadIMG'){
                    $.ajax({
                        url:ctx+'/module/ordersDetail/edit',
                        dataType:'json',
                        type:'post',
                        data:{
                            id:id,
                            surfaceBillPrint:1,
                        },
                        success:function (data) {
                            // window.parent.location.reload();
                        }
                    });
                }else {
                    $.ajax({
                        url:ctx+'/module/ordersDetail/edit',
                        dataType:'json',
                        type:'post',
                        data:{
                            id:id,
                            sendBillPrint:1,
                        },
                        success:function (data) {
                            // window.parent.location.reload();
                        },error:function (data) {
                        }
                    });
                }
            })
        });
    }


    $("#form-ordersHead-add").validate({
        rules:{
            xxxx:{
                required:true,
            },
        },
        submitHandler: function(form) {
            //$.operate.save(prefix + "/updateBill", $('#form-ordersHead-add').serialize());
            updateBill();
        }
    });

    function updateBill() {
        var sendBillUploadIMG_src = $("#sendBillUploadIMG").attr("src");
        var surfaceBillUploadIMG_src = $("#surfaceBillUploadIMG").attr("src");
        if(sendBillUploadIMG_src==""&&surfaceBillUploadIMG_src==""){
            $.modal.alertWarning("Please upload at least one bill！");
            return false;
        }else{
            if(sendBillUploadIMG_src==""){
                $.modal.msg("Please remember to upload the sendBill！");
                window.setTimeout("uploadPicture()",800);

            }else {
                if(surfaceBillUploadIMG_src==""){
                    $.modal.msg("Please remember to upload the surfaceBill！");
                    window.setTimeout("uploadPicture()",800);
                }else{
                    uploadPicture();
                }
            }
        }
    }


    //上传图片
    function uploadPicture() {
        var formData = $('#form-ordersHead-add').serialize();
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "module/ordersDetail/updateBill",
            data : formData,
            async : false,
            error : function(request) {
                $.modal.alertError("system error");
            },
            success : function(data) {
                $.operate.saveSuccess(data);
                sendMsg();
            }
        });
    }

    //发送消息，在后台进行消息处理
    function sendMsg(){
        websocket.send(JSON.stringify("消息！！！"));
    }
</script>
<script th:src="@{/ajax/libs/jquery-migrate/jQuery.print.min.js}"></script>
<script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script>




</script>
</body>
</html>
